import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Clipboard, TextInput } from 'react-native';
import { Container, Content, View, Toast, Text, Icon } from 'native-base';
import { connect } from 'react-redux';
import { Image, Avatar } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';


import { Header, Loading } from '../../component';
import { Colors, Metrics } from '../../theme';
import Http from '../../utils/HttpPost';



class Myteam extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isLoading: false,
		}
	}


	UNSAFE_componentWillMount() {

	}

	componentDidMount() {
		
	}

	//  路由地址
	toNavigateFunc(uri) {
		this.props.navigation.navigate(uri)
	}

	render() {
		return (
			<Container>
				<Header title="我的团队" backgroundColor={Colors.subject} onLeftPress={() => this.props.navigation.goBack()}  rightIcon="help-circle" onRightPress={() => { this.toNavigateFunc('UserStar') }} />
				<Loading showLoading={this.state.isLoading} />
				<Content>
					<View style={Styles.titContents}>
						<Text style={Styles.dengjiText}> 暂无等级 </Text>
					</View>
					<View style={Styles.contents}>
						<View style={Styles.teamCont}>
							<View style={Styles.teamItem}>
								<Text style={Styles.teamItemNum}> 3801 </Text>
								<Text style={Styles.teamItemText}>团队人数</Text>
							</View>
							<View style={Styles.teamItem}>
								<Text style={Styles.teamItemNum}> 9.86k </Text>
								<Text style={Styles.teamItemText}>团队活跃度</Text>
							</View>
							<View style={Styles.teamItem}>
								<Text style={Styles.teamItemNum}> 8.66k </Text>
								<Text style={Styles.teamItemText}>大区活跃度</Text>
							</View>
							<View style={[Styles.teamItem,{borderRightWidth: 0}]}>
								<Text style={Styles.teamItemNum}> 380 </Text>
								<Text style={Styles.teamItemText}>小区活跃度</Text>
							</View>
						</View>

						<View style={Styles.listCont}>
							<View style={Styles.listTit}>
								<View style={Styles.listTitItme}>
									<Text style={Styles.listTitItmeFont}>活跃度</Text>
									<View style={Styles.listTitItmeIconCont}>
										<Icon type="FontAwesome" name='sort-up' style={Styles.listTitItmeIconSelect} />
										<Icon type="FontAwesome" name='sort-desc' style={Styles.listTitItmeIcon} />
									</View>
								</View>
								<View style={Styles.listTitItme}>
									<Text style={Styles.listTitItmeFont}>团队人数</Text>
									<View style={Styles.listTitItmeIconCont}>
										<Icon type="FontAwesome" name='sort-up' style={Styles.listTitItmeIcon} />
										<Icon type="FontAwesome" name='sort-desc' style={Styles.listTitItmeIcon} />
									</View>
								</View>
								<View style={Styles.listTitItme}>
									<Text style={Styles.listTitItmeFont}>达人星级</Text>
									<View style={Styles.listTitItmeIconCont}>
										<Icon type="FontAwesome" name='sort-up' style={Styles.listTitItmeIcon} />
										<Icon type="FontAwesome" name='sort-desc' style={Styles.listTitItmeIcon} />
									</View>
								</View>
								<View style={Styles.listTitItme}>
									<Text style={Styles.listTitItmeFont}>注册时间</Text>
									<View style={Styles.listTitItmeIconCont}>
										<Icon type="FontAwesome" name='sort-up' style={Styles.listTitItmeIcon} />
										<Icon type="FontAwesome" name='sort-desc' style={Styles.listTitItmeIcon} />
									</View>
								</View>
							</View>

							<View style={Styles.listItemCont}>
								<View style={Styles.listItem}>
									<LinearGradient style={Styles.positionTips} colors={[Colors.gradientBtnYou, Colors.gradientBtnZuo]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
										<Text style={{ color: Colors.bai, fontSize: Metrics.fontSize14, padding: 4 }}>已实名</Text>
									</LinearGradient>
									<Avatar
									size="medium"
									rounded
									source={require('../../asserts/images/user/headPortrait.jpg')}
									onPress={() => this.props.navigation.navigate('UserCenter')}
									activeOpacity={0.7}
									/>
									<View style={Styles.listItemTextCont}>
										<Text  style={[Styles.listItemFonts1,{fontSize: Metrics.fontSize16}]}>***3371</Text>
										<View style={Styles.listItemTextTuandui}>
											<Text style={Styles.listItemFonts}>团队人数 <Text style={Styles.listItemFonts1}>1</Text></Text>
											<Text style={Styles.listItemFonts}>团队活跃度 <Text style={Styles.listItemFonts1}>5</Text></Text>
										</View>
										<View>
											<Text style={Styles.listItemFonts}>注册时间 <Text style={Styles.listItemFonts1}>2020-07-17 00:51:32</Text></Text>
										</View>
									</View>
								</View>

								<View style={Styles.listItem}>
									<TouchableOpacity style={Styles.positionTips} >
										<Text style={{ color: Colors.bai, fontSize: Metrics.fontSize14, padding: 4 }}>未实名</Text>
									</TouchableOpacity>
									<Avatar
									size="medium"
									rounded
									source={require('../../asserts/images/user/headPortrait.jpg')}
									onPress={() => this.props.navigation.navigate('UserCenter')}
									activeOpacity={0.7}
									/>
									<View style={Styles.listItemTextCont}>
										<Text  style={[Styles.listItemFonts1,{fontSize: Metrics.fontSize16}]}>***2877</Text>
										<View style={Styles.listItemTextTuandui}>
											<Text style={Styles.listItemFonts}>团队人数 <Text style={Styles.listItemFonts1}>10</Text></Text>
											<Text style={Styles.listItemFonts}>团队活跃度 <Text style={Styles.listItemFonts1}>5</Text></Text>
										</View>
										<View>
											<Text style={Styles.listItemFonts}>注册时间 <Text style={Styles.listItemFonts1}>2020-07-12 16:18:06</Text></Text>
										</View>
									</View>
								</View>
							</View>
						</View>
						
					</View>
				</Content>
			</Container>
		);
	}

}

const mapStateToProps = state => ({
	logged: state.user.logged,
	token: state.user.token,
	global: state.global,
});

const mapDispatchToProps = dispatch => ({
	setGlobalInfo: globalInfo => dispatch({ type: 'SET_GLOBALINFO', payload: { globalInfo } }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Myteam);

const Styles = StyleSheet.create({
	titContents: { minHeight: 200, backgroundColor: Colors.subject,alignItems: "center",justifyContent: "center", },
	contents: { backgroundColor: Colors.huiF0, paddingBottom: 20},
	dengjiText: {fontSize: Metrics.fontSize18, color: Colors.bai},
	teamCont: {flexDirection: "row",justifyContent: "space-between",alignItems: "center", backgroundColor: Colors.bai, paddingTop: 15, paddingBottom: 15},
	teamItem: {flex:1 ,alignItems: "center",justifyContent: "center", borderRightWidth: 1, borderRightColor: Colors.subjectJbZuo},
	teamItemNum: {fontSize: Metrics.fontSize16, color: Colors.hui33},
	teamItemText: {fontSize: Metrics.fontSize14, color: Colors.hui99, marginTop: 6},
	listCont:{marginTop: 20, backgroundColor: Colors.bai},
	listTit: {flexDirection: "row",justifyContent: "space-between",alignItems: "center",borderBottomColor: Colors.huiF0, borderBottomWidth: 1, height: 40},
	listTitItme: {flex: 1,flexDirection: "row", justifyContent: "center",alignItems: "center",},
	listTitItmeFont: {fontSize: Metrics.fontSize14, color: Colors.hui99,},
	listTitItmeIcon: {fontSize: Metrics.fontSize14, color: Colors.hui99,},
	listTitItmeIconSelect: {fontSize: Metrics.fontSize14, color: Colors.subject,},
	listTitItmeIconCont: { flexDirection: "column",alignItems: "center",justifyContent: "center",marginLeft: 6},
	listItem: {flexDirection: "row",justifyContent: "flex-start",alignItems: "center",paddingLeft: 15, paddingBottom: 15, position: 'relative', borderBottomColor: Colors.huiF0, borderBottomWidth: 1,},
	listItemTextCont: {paddingLeft: 20, justifyContent: "flex-start"},
	listItemFonts: {fontSize: Metrics.fontSize14, color: Colors.hui99, marginTop: 8},
	listItemFonts1: {fontSize: Metrics.fontSize14, color: Colors.hui33, marginTop: 8},
	listItemTextTuandui: { flexDirection: "row",justifyContent: "space-between",alignItems: "center"},
	positionTips:　{ backgroundColor: Colors.huiF0, paddingLeft: 8, paddingRight: 8, alignItems: "center", borderTopLeftRadius: 20, borderBottomLeftRadius: 20, position: 'absolute', top: 8, right: 0 },
});